<template>
    <div id="box">
        <div id="search">
            <el-form :inline="true" :model="logSearch" class="demo-form-inline">
                <el-form-item label="操作人">
                    <el-input v-model="logSearch.searchParams.username" placeholder="请输入操作人"></el-input>
                </el-form-item>
                <el-form-item label="操作地址">
                    <el-input v-model="logSearch.searchParams.ip" placeholder="请输入IP"></el-input>
                </el-form-item>
                <el-form-item label="系统模块">
                    <el-input v-model="logSearch.searchParams.model" placeholder="请输入模块名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearchSubmit">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-share" @click="exportLogSubmit">导出日志</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div id="header-bth">
            <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteLogs">批量删除</el-button>
        </div>

        <div id="log-table">
            <el-table
                    :data="tableData"
                    stripe
                    height="310"
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column label="日志编号">
                    <template slot-scope="scope">
                        <span style="margin-left: 20px">{{ scope.row.id}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="系统模块" width="180px">
                    <template slot-scope="scope">
                        <span style="margin-left: 20px">{{ scope.row.model}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作类型">
                    <template slot-scope="scope">
                        <span>{{ scope.row.description }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作人员">
                    <template slot-scope="scope">
                        <span>{{ scope.row.username }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作地址" width="150px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.ip}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作参数" width="200px" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.params}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="资源路径" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.url}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="耗时(ms)">
                    <template slot-scope="scope">
                        <span>{{ scope.row.timeConsuming}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作日期" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="nav-page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="pageSizes"
                    :page-size="logSearch.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>

import {exportLogs, logsPage, removeLogs} from "@/api/logs";
import fileDownload from "js-file-download";

    export default {
        name: "OperationLogView",
        data() {
            return {
                tableData:[],
                pageSizes:[5,10,15],
                total:20,
                logSearch:{
                    limit:5,
                    page:1,
                    searchParams:{
                        username:'',
                        ip:'',
                        model:''
                    }
                },
                /*复选框数据*/
                multipleSelection: []
            }
        },
        methods: {
            // 导出系统日志
            exportLogSubmit(){
                let  username = this.logSearch.searchParams.username
                let  ip = this.logSearch.searchParams.ip
                let  model = this.logSearch.searchParams.model
                // 导出日志
                exportLogs({username,ip,model }).then(response=>{
                    fileDownload(response,new Date().getTime()+'.xlsx')
                })

            },
            handleSelectionChange(val){
                this.multipleSelection = val.map(row => row.id)
            },
            // 批量删除
            deleteLogs(){
                if (this.multipleSelection.length==0){
                    this.$message.warning("请至少选择一条数据")
                    return
                }
               // 发送异步请求删除数据
                let ids = this.multipleSelection;
                removeLogs(ids).then(response=>{
                    if (response.code==0){
                        this.$notify.success(response.message)
                        this.list()
                    }
                })
            },
            //切换每页显示条数
            handleSizeChange(val){
                this.logSearch.limit=val
                this.list()
            },
            // 切换页码
            handleCurrentChange(val){
                this.logSearch.page=val
                this.list()
            },
            // 搜索
            onSearchSubmit(){
                this.logSearch.page=1
                this.list()
            },
            list(){
                logsPage(this.logSearch).then(response=>{
                    if (response.code==0){
                        this.total = response.data.total
                        this.tableData = response.data.tableData
                    }
                })
            }
        },
        created() {
            this.list()
        }
    }
</script>

<style scoped>

    #box{
        width: 95%;
        margin: 5px auto 0;
    }

    #search {
        margin-top: 40px;
        padding: 5px;
        border-bottom: 1px solid #eee;
    }

    #header-bth {
        margin-top: 20px;
        margin-bottom: 20px;
    }


    #nav-page {
        margin-top: 15px;
        margin-bottom: 30px;
    }

    .el-button {
        margin-left: 5px;
        margin-right: 5px;
    }
</style>

